<template>
    <div class="page-invite-adv">
        <div class="title">
            <img src="../../../../assets/img/invite_title.png" height="50" alt="">
        </div>
        <div class="accept-tip" v-if="hadAccept">
            <div class="img-success">
                <img src="../../../../assets/img/success.png" height="100">
            </div>
            <h2>您已成功接收邀请</h2>
            <p>请关闭页面</p>
        </div>
        <template v-else>
            <div class="slogan">
                <img src="../../../../assets/img/invite_slogan.png" height="200" alt="">
            </div>
            <div class="info">
                <h1>尊敬的{{info.adviserName}}</h1>
                <p>{{info.designerName}}已入驻“约个设计”</p>
                <p>成为签约设计师</p>
                <p>TA特邀您成为TA的设计师顾问</p>
                <p class="light">输入手机号，完成身份验证</p>
            </div>
            <div class="form">
                <van-cell-group>
                    <p class="form-tip">该号码登录平台，用于项目佣金提现</p>
                    <van-field
                        placeholder="请输入手机号码"
                        left-icon="phone"
                        clearable
                        v-model="form.mobile"/>
                    <van-field
                        v-model="form.code"
                        center
                        clearable
                        left-icon="more"
                        placeholder="短信验证码"
                    >
                        <van-button 
                            :disabled="hadSendSms || !form.mobile"
                            slot="button" 
                            size="small" 
                            type="primary" @click="onSend">发送验证码</van-button>
                    </van-field>
                </van-cell-group>
                <div class="btn-submit">
                    <van-button 
                        :disabled="!(form.mobile && form.code && hadSendSms)"
                        type="primary" block @click="onSubmit">完成邀请</van-button>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import { smscode } from '../../api/sms'
import { adviserAcceptInvitation, queryAdviserById } from '../../api/adviser'
export default {
    props: {
        adviserId: String
    },
    data(){
        return {
            form: {
                mobile: '',
                code: '',
            },
            info: {},
            hadSendSms: false,
            hadAccept: false,
        }
    },
    methods: {
        onSubmit(){
            const data = Object.assign({adviserId: this.adviserId}, this.form)
            adviserAcceptInvitation(data).then(rsp => {
                if(rsp.code === 200){
                    this.$toast.success('发送成功');
                    this.hadAccept = true;
                }
            })
        },

        onSend(){
            smscode({
                smsType: 1,
                phoneNumber: this.form.mobile
            }).then(rsp => {
                if(rsp.code === 200){
                    this.$toast.success('发送成功');
                }
                this.hadSendSms = true
            })
        },

        queryAdviserById(){
            queryAdviserById(this.adviserId).then(rsp => {
                if(rsp.code === 200 && rsp.data){
                    this.info = rsp.data
                }
            })
        }
    },
    created(){
        this.queryAdviserById()
    }
}
</script>


<style lang="less">
.page-invite-adv{
    min-height: 100%;
    background: linear-gradient(to bottom, #fff, #E5ECFB);
    display: flex;
    flex-direction: column;
    .title{
        padding: 20px;
    }
    .slogan{
        text-align: center;
        margin: 25px 0;
    }

    .accept-tip{
        text-align: center;
        padding: 100px 0;
        line-height: 2;
        font-size: 13px;
        color: #707070;
        .img-success{
            margin-bottom: 20px;
        }
    }

    .info{
        text-align: center;
        line-height: 1.6;
        h1{
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        p{
            font-size: 13px;
            color: #666;
            &.light{
                margin: 5px 0;
                color: @primary;
            }
        }
    }
    .form{
        padding: 30px 12.5% 20px;
        .form-tip{
            padding-left: 20px;
            font-size: 12px;
            color: #999;
        }
        .btn-submit{
            padding: 10px 0;
            button{
                border-radius: 22px;
            }
        }
        .van-cell-group{
            background: none;
            .van-cell{
                margin: 10px 0;
                border: 1px solid #ededed;
                border-radius: 22px;
                &:after{
                    display: none;
                }
            }
        }
    }
}
</style>
